<template>
  <div>
      <div>姓名:{{ name }}</div>
      <div>年龄：{{age}}</div>
      <div>妻子:{{ wife.name}}</div>
  </div>
</template>
<!-- 
  toRef函数的作用：就是将一个reactive响应式对象中的属性转换为一个ref变量
  toRefs函数的作用：将整个reactive对象转换ref变量
 -->
<script lang='ts'>
  import {reactive,toRef,toRefs} from 'vue'
  interface IPerson{
    name:string,
    age:number,
    wife:{
      name:string
    }
  }
  export default{
    setup() {
        let person=reactive<IPerson>({name:'Giles',age:23,wife:{name:'Monica'}})
        console.log('person',person);
        console.log('name',toRef(person,'name'));
        // return {
        //   name:toRef(person,'name'),
        //   age:toRef(person,"age"),
        //   wname:toRef(person.wife,"name")
        // }  
        return {...toRefs(person)}
    },
  }
</script>

<style lang='scss' scoped>
</style>